<template>
  <div class="home">
    <el-container>
      <el-header style="background-color: rgb(9,83,216)">
        <div style="line-height: 60px;font-weight: bold;font-size:22px;color: rgb(255,255,255)">
          员工管理系统
        </div>
        <el-menu class="nav" :default-active="'1'" mode="horizontal">
          <el-menu-item index="1" @click="toNav('/index')">我的中心</el-menu-item>
          <el-menu-item index="2" @click="toNav('/register')">我的登记</el-menu-item>
          <el-menu-item index="3" @click="toNav('/work-time')">工时查询</el-menu-item>
          <el-menu-item index="4" @click="toNav('/user-info')">个人信息</el-menu-item>
        </el-menu>
        <div class="user-info">
          <el-dropdown>
            <span>
               {{ userInfo.realName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </div>
      </el-header>
      <el-main>
        <div class="main">
          <router-view></router-view>

        </div>
      </el-main>
      <el-footer class="footer">
        <div>
          &copy;2021-2099员工管理系统
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Cookie from 'js-cookie'

export default {
  name: "Home",
  data() {
    return {
      userInfo: this.$store.state.userInfo
    }
  },
  methods: {
    toNav(path) {
      this.$router.push(path)
    },
    getUserInfo() {
      this.$http.get("/user/current").then(({data: res}) => {
        if (res.code !== '200') {
          this.$message.error(res.msg)
          return
        }
        this.$message.success(res.data.username)
      }).catch(() => {
        this.$message.error('用户名或密码错误')
      })
    },
    logout() {
      this.$confirm('此操作将注销登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Cookie.remove('user')
        this.$router.replace("/login");
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
}
</script>

<style scoped>
.home {
  left: 0;
  top: 0;
  margin: 0;

}

.nav {
  margin-left: 200px;
  width: 500px;
  height: 60px;
  background: rgb(9, 83, 216);
  color: rgb(255, 255, 255);
  font-size: 18px;
  margin-top: -60px;
}

.user-info {
  float: right;
  font-weight: bold;
  font-size: 18px;
  margin-top: -60px;
  margin-right: 50px;
  padding-left: 20px;
  line-height: 60px;
}

.main {
  background: rgb(248, 246, 246);
  min-height: 100vh;
}

.footer {
  text-align: center;
}
</style>
